<template>
  <div class="approval-center-container">
    <el-card class="page-card" shadow="hover">
      <template #header>
        <div class="card-header">
          <div class="header-left">
            <el-icon class="header-icon"><Check /></el-icon>
            <span class="header-title">审批中心</span>
          </div>
        </div>
      </template>
      
      <el-tabs v-model="activeTab" class="approval-tabs">
<!--        <el-tab-pane label="加班审批" name="overtime">-->
<!--          <el-table-->
<!--            :data="overtimeList"-->
<!--            style="width: 100%"-->
<!--            stripe-->
<!--            :empty-text="'暂无待审批的加班申请'"-->
<!--          >-->
<!--            <el-table-column label="员工" width="150" align="center">-->
<!--              <template #default="scope">-->
<!--                <span>{{ getUserName(scope.row) }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="加班日期" width="150" align="center">-->
<!--              <template #default="scope">-->
<!--                <span>{{ formatDateOnly(scope.row.overtimeDate || scope.row.checkInTime) }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="加班时长" width="120" align="center">-->
<!--              <template #default="scope">-->
<!--                <span>{{ scope.row.hours ? scope.row.hours + ' 小时' : '-' }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="reason" label="加班原因" min-width="200" show-overflow-tooltip />-->
<!--            <el-table-column prop="createTime" label="申请时间" width="180" align="center">-->
<!--              <template #default="scope">-->
<!--                <span class="time-text">{{ formatDate(scope.row.createTime) }}</span>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column label="操作" width="180" align="center" fixed="right">-->
<!--              <template #default="scope">-->
<!--                <el-button size="small" type="success" @click="handleApproveOvertime(scope.row.id, 'APPROVED')">-->
<!--                  <el-icon><Check /></el-icon>-->
<!--                  通过-->
<!--                </el-button>-->
<!--                <el-button size="small" type="danger" @click="handleApproveOvertime(scope.row.id, 'REJECTED')">-->
<!--                  <el-icon><Close /></el-icon>-->
<!--                  拒绝-->
<!--                </el-button>-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--          </el-table>-->
<!--        </el-tab-pane>-->
        
        <el-tab-pane label="请假审批" name="leave">
          <el-table 
            :data="leaveList" 
            style="width: 100%"
            stripe
            :empty-text="'暂无待审批的请假申请'"
          >
            <el-table-column label="员工" width="150" align="center">
              <template #default="scope">
                <span>{{ getUserName(scope.row) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="120" align="center">
              <template #default="scope">
                <el-tag v-if="scope.row.type === 'ANNUAL'" type="success" effect="dark">年假</el-tag>
                <el-tag v-else-if="scope.row.type === 'SICK'" type="warning" effect="dark">病假</el-tag>
                <el-tag v-else-if="scope.row.type === 'PERSONAL'" type="info" effect="dark">事假</el-tag>
                <el-tag v-else effect="dark">调休</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="日期" width="200" align="center">
              <template #default="scope">
                <span>{{ formatDateOnly(scope.row.startDate) }} 至 {{ formatDateOnly(scope.row.endDate) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="days" label="天数" width="80" align="center">
              <template #default="scope">
                <span>{{ scope.row.days }} 天</span>
              </template>
            </el-table-column>
            <el-table-column prop="reason" label="原因" min-width="200" show-overflow-tooltip />
            <el-table-column prop="createTime" label="申请时间" width="180" align="center">
              <template #default="scope">
                <span class="time-text">{{ formatDate(scope.row.createTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="180" align="center" fixed="right">
              <template #default="scope">
                <el-button size="small" type="success" @click="handleApproveLeave(scope.row.id, 'APPROVED')">
                  <el-icon><Check /></el-icon>
                  通过
                </el-button>
                <el-button size="small" type="danger" @click="handleApproveLeave(scope.row.id, 'REJECTED')">
                  <el-icon><Close /></el-icon>
                  拒绝
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'
import request from '../utils/request'
import { ElMessage } from 'element-plus'
import { Check, Close } from '@element-plus/icons-vue'

export default {
  name: 'ApprovalCenter',
  components: {
    Check,
    Close
  },
  setup() {
    const activeTab = ref('leave')
    const overtimeList = ref([])
    const leaveList = ref([])
    
    const formatDate = (dateStr) => {
      if (!dateStr) return ''
      return new Date(dateStr).toLocaleString('zh-CN')
    }
    
    const formatDateOnly = (dateStr) => {
      if (!dateStr) return '-'
      const date = new Date(dateStr)
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      return `${year}-${month}-${day}`
    }
    
    // 获取用户名称（从后端返回的数据中获取）
    const getUserName = (record) => {
      // 优先使用后端返回的userName字段
      if (record.userName) {
        return record.userName
      }
      // 如果没有，使用userId作为后备
      return `员工${record.userId}`
    }
    
    const loadOvertimeList = async () => {
      try {
        const res = await request.get('/attendance/overtime/pending')
        overtimeList.value = res.data || []
      } catch (error) {
        console.error('加载加班申请失败', error)
      }
    }
    
    const loadLeaveList = async () => {
      try {
        const res = await request.get('/leave/pending')
        leaveList.value = res.data || []
      } catch (error) {
        console.error('加载请假申请失败', error)
      }
    }
    
    const handleApproveOvertime = async (recordId, status) => {
      try {
        await request.post('/attendance/overtime/approve', {
          recordId,
          status
        })
        ElMessage.success(status === 'APPROVED' ? '审批通过' : '已拒绝')
        loadOvertimeList()
      } catch (error) {
        ElMessage.error(error.message || '审批失败')
      }
    }
    
    const handleApproveLeave = async (recordId, status) => {
      try {
        await request.post('/leave/approve', {
          leaveId: recordId,
          status
        })
        ElMessage.success(status === 'APPROVED' ? '审批通过' : '已拒绝')
        loadLeaveList()
      } catch (error) {
        ElMessage.error(error.message || '审批失败')
      }
    }
    
    onMounted(() => {
      loadOvertimeList()
      loadLeaveList()
    })
    
    return {
      activeTab,
      overtimeList,
      leaveList,
      formatDate,
      formatDateOnly,
      getUserName,
      handleApproveOvertime,
      handleApproveLeave
    }
  }
}
</script>

<style scoped>
.approval-center-container {
  width: 100%;
  height: 100%;
}

.page-card {
  border-radius: 12px;
  border: none;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-icon {
  font-size: 24px;
  color: #409eff;
}

.header-title {
  font-size: 20px;
  font-weight: 600;
  color: #1a1a1a;
}

.approval-tabs {
  margin-top: 16px;
}

.time-text {
  color: #666;
  font-size: 14px;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background-color: #fafafa;
  color: #333;
  font-weight: 600;
}

:deep(.el-table td) {
  padding: 16px 0;
}
</style>

